import {
    createTaskQueue,
    arraied
} from "../Misc"

/**
 * 任务队列
 */
const taskQueue = createTaskQueue()

/**
 * 当前任务
 */

let subTask = null

const getFirstTask = () => { // 返回最外fiber节点
    const task = taskQueue.pop()

    /**
     * 返回最外层节点的fiber对象
     */

     return {
        props: task.props,
        stateNode: task.dom, // 对应发真实dom class组件的实例对象 function组件的函数
        tag: "host_root",
        effects: [],
        child: null,
        alternate: task.dom.__rootFiberContainer //对应上一次渲染的fiber节点  
     }
}

const executeTask = (fiber) => {

    if (fiber.tag === 'class_component') {
        reconcileChildren(fiber, fiber.stateNode.render())
    } else if (fiber.tag === 'function_component') {
        reconcileChildren(fiber, fiber.stateNode(fiber.props))
    } else {
        reconcileChildren(fiber, fiber.props.children)
    }
}

const reconcileChildren = (fiber, children) => {

    let childs = arraied(children)
    
    /**
     * 循环 children 使用的索引
     */
    let index = 0
    /**
     * children 数组中元素的个数
     */
    let numberOfElements = childs
    .length
    /**
     * 循环过程中的循环项 就是子节点的 virtualDOM 对象
     */
    let element = null
    /**
     * 子级 fiber 对象
     */
    let newFiber = null
    /**
     * 上一个兄弟 fiber 对象
     */
    let prevFiber = null

    let alternate = null //上一次渲染的fiber节点

    if (fiber.alternate && fiber.alternate.child) {
        alternate = fiber.alternate.child
    }
    console.log(alternate, fiber)

    if (alternate && alternate.sibling) {
        alternate = alternate.sibling
    } else {
        alternate = null
    }

} 

const workLoop = (deadline) => {
    if (!subTask) {
        subTask = getFirstTask()
    }

    while(subTask && deadline.timeRemaining() > 1) { // 有空闲时间
        //开始一级一级构建子集fiber
        subTask = executeTask(subTask)
    }
    /**
     * fiber树构建完成 开始渲染
     */
}

const performWork = (deadline) => {
    /**
   * 执行任务
   */
  workLoop(deadline)
  /**
   * 判断任务是否存在
   * 判断任务队列中是否还有任务没有执行
   * 再一次告诉浏览器在空闲的时间执行任务
   */
//   if (subTask || !taskQueue.isEmpty()) {
//     requestIdleCallback(performWork)
//   }

}



export const render = (element, dom) => {
    console.log(element, dom)
    // const div = document.createElement('div')
    // div.innerHTML = 'div'
    // dom.appendChild(div)
    taskQueue.push({
        dom,
        props: { children: element }
    })

    requestIdleCallback(performWork)

}

export const scheduleUpdate = (instance, partialState) => {
    taskQueue.push({
      from: "class_component",
      instance,
      partialState
    })
    requestIdleCallback(performTask)
  }